<template>
    <div  class=' space-y-1 rounded-lg border border-gray-200 bg-white shadow-lg' :style="{
      right: itemWidth ? itemWidth - 10 : 215,
      minWidth: 252,
    }"
    @mouseover="isItemHovering = true"
    @mouseout ="isItemHovering = false"
    >
      <div class='flex h-[22px] items-center px-3 text-xs font-normal text-gray-700'><span class='text-gray-500'>{{title}}.</span>{{currObjPath.join('.')}}</div>
          <Item v-for="(v, i) in data"
            :key="i"
            :nodeId="nodeId"
            :title="title"
            :objPath="objPath"
            :itemData="v"
            @change="onChange"
            @mouseover="isChildrenHovering = true"
            @mouseout ="isChildrenHovering = false"
            :isSupportFileVar="isSupportFileVar"
            :isException="v.isException"
          />
    </div>
</template>
<script setup lang="ts" name="VarReferenceVarsItem">
import {computed, ref, watch} from 'vue';
import { type ValueSelector, type Var } from '@/app/components/workflow/types'
type ObjectChildrenProps = {
  nodeId: string
  title: string
  data: Var[]
  objPath: string[]
  onChange: (value: ValueSelector, item: Var) => void
  onHovering?: (value: boolean) => void
  itemWidth?: number
  isSupportFileVar?: boolean
}

const props = defineProps<ObjectChildrenProps>();

const currObjPath = props.objPath
  const isItemHovering = ref(false)
  const isChildrenHovering = ref(false)
  const isHovering = computed(()=>isItemHovering.value || isChildrenHovering.value);
  watch(isHovering,() => {
    props.onHovering && props.onHovering(isHovering.value)
  })
  watch(isItemHovering,() => {
    props.onHovering &&props. onHovering(isItemHovering.value)
  })
</script>